<!-- 行为 -->
 <!-- lang="ts" :支持ts语法  setup：是 Vue3 的组合式 API 写法 -->
 <script lang="ts" setup>
import { onMounted ,ref} from 'vue';

// 创建ref,初始值为null   ref 获取 DOM 元素时，类型可参考 document.querySelector() 的返回值类型
const h1Ref = ref<HTMLHeadingElement | null>(null)
console.log('setup',h1Ref.value) // null，组件的 DOM 节点还没开始挂载

// 组件的 DOM 节点挂载完毕，可以获取到 DOM 元素
// 温馨提示：后期该语法用于获取到 Vue 组件的实例
onMounted(()=>{
    // 鼠标悬停看 querySelector 可以看到返回值的类型
  const h1Dom = document.querySelector('h1')
  console.log(h1Dom)

  console.log('onMounted',h1Ref.value)
    // 调用 DOM 元素的方法的 append 方法
  h1Ref.value?.append('!!')
})

 </script>
 
 <!-- 结构 -->
  <template>
   <h1 class="title" ref="h1Ref" >Hello World</h1>
 
  </template>
 
  <!-- 样式 -->
   <!-- scoped:样式 只对当前组件有效 -->
   <style scoped>
   .title{
     color: red;
   }
 </style>